import React, { useState, useCallback, useEffect } from 'react';
import { useHistory, useLocation } from 'react-router-dom'
import { getAccFeedbackInfoFeedbackInfoDetail } from '../../financialApi';
import {
    FinanceFeedBackDetailsAll,
    FinanceFeedBackDetailsTop,
    FinanceFeedBackDetailsSteps,
    FinanceFeedBackDetailsContent
} from './style';
import { Breadcrumb, message, Steps, Row, Col } from 'antd';
const { Step } = Steps;

/**
 * @description: 费用反馈 -- 反馈列表 -- 详情
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-16） 创建
 */


const FinanceFeedBackDetails = () => {
    const history = useHistory();
    const location = useLocation();
    const { state } = location;
    const [detailsData, setDetailsData] = useState({}); //详情data
    const detailsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getAccFeedbackInfoFeedbackInfoDetail({ id: state.id });
                if (code === '20000') {
                    setDetailsData(data);
                } else {
                    message.error(msg);
                }
            })()
        },
        [state],
    )
    useEffect(() => {
        detailsFun()
    }, [detailsFun])
    return <div style={{ margin: '20px' }}>
        <Breadcrumb style={{ fontSize: '12px', fontFamily: 'PingFang SC', fontWeight: '500', color: '#999999', marginBottom: '20px' }}>
            <Breadcrumb.Item>费用反馈</Breadcrumb.Item>
            <Breadcrumb.Item style={{ cursor: 'pointer' }} onClick={() => history.go('-1')}>
                反馈列表
            </Breadcrumb.Item>
            <Breadcrumb.Item>
                反馈详情
            </Breadcrumb.Item>
        </Breadcrumb>
        <FinanceFeedBackDetailsAll>
            <FinanceFeedBackDetailsTop>
                <h3>反馈详情</h3>
            </FinanceFeedBackDetailsTop>
            <FinanceFeedBackDetailsSteps>
                <Steps labelPlacement='vertical'>
                    {
                        detailsData.steps && detailsData.steps.map(item => <Step
                            title={item.title}
                            description={item.description}
                            status={item.status ? item.status === 'success' ? "finish" : "error" : "wait"}
                        />)
                    }
                </Steps>
            </FinanceFeedBackDetailsSteps>
            <FinanceFeedBackDetailsContent>
                <div className='content_h4'>
                    <h4>基本信息</h4>
                </div>
                <div className='content_row'>
                    <Row>
                        <Col span={6}>
                            反馈编号：{detailsData.backNo}
                        </Col>
                        <Col span={6}>
                            费用性质：{detailsData.nature}
                        </Col>
                        <Col span={6}>
                            实报金额：{detailsData.money}
                        </Col>
                        <Col span={6}>
                            办事结果：{detailsData.result}
                        </Col>
                        <Col span={24}>
                            {'简要说明：' + detailsData.remake}
                        </Col>
                    </Row>

                </div>
            </FinanceFeedBackDetailsContent>
            <FinanceFeedBackDetailsContent>
                <div className='content_h4'>
                    <h4>费用申请信息</h4>
                </div>
                <div className='content_row'>
                    <Row>
                        {
                            detailsData.serialNo && detailsData.serialNo.map((item, index) => <Col span={24}>
                                <span style = {{marginRight: "112px"}}>{index +  1}.费用申请流水号：{item.serialNo}</span>
                                     费用性质:{item.accounting.describe}
                            </Col>)
                        }

                    </Row>
                </div>
            </FinanceFeedBackDetailsContent>
            <FinanceFeedBackDetailsContent>
                <div className='content_h4'>
                    <h4>承担信息</h4>
                </div>
                <div className='content_row'>
                    <Row>
                        <Col span={6}>
                            承担部门：{detailsData.assumeDepName}
                        </Col>
                        <Col span={6}>
                            承担人员：{detailsData.assumeMainName}
                        </Col>
                    </Row>
                </div>
            </FinanceFeedBackDetailsContent>
            <FinanceFeedBackDetailsContent>
                <div className='content_h4'>
                    <h4>反馈信息</h4>
                </div>
                <div className='content_row'>
                    <Row>
                        <Col span={6}>
                            反馈人员：{detailsData.createUser}
                        </Col>
                        <Col span={6}>
                            反馈时间：{detailsData.feedbackTime}
                        </Col>
                    </Row>

                </div>
            </FinanceFeedBackDetailsContent>

        </FinanceFeedBackDetailsAll>
    </div>


}

export default FinanceFeedBackDetails;